<script setup lang="ts">
import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import CustomNavbar from './components/CustomNavbar.vue'
import {
  getCategoryDataAPI,
  getHotGoodsDataAPI,
  getSwiperDataAPI,
} from '@/services/home'
import { ref } from 'vue'
import type { CategoryItem, HotGoodsItem, SwiperItem } from '@/types/home'
import CategoryPanel from './components/CategoryPanel.vue'
import HotPanel from './components/HotPanel.vue'
// 导入lodash插件对事件回调进行防抖处理
// @ts-ignore  lodash为js库无类型声明文件
import { debounce } from 'lodash'
// 导入骨架屏
import PageSkeleton from './components/PageSkeleton.vue'
// 导入猜你喜欢组件的自定义hook
import useCustomGuess from '@/hooks/useCustomGuess'

/**轮播图的数据*/
const swiperData = ref<SwiperItem[]>([])
/**分类数据*/
const categoryData = ref<CategoryItem[]>([])
/**热门推荐商品数据*/
const hotGoodsData = ref<HotGoodsItem[]>([])
/**标记数据是否正在加载中 */
let isLoading = ref(false)

// 获取猜你喜欢自定义hook中的数据
const { guessRef, refreshTrigger, onScrolltolower } = useCustomGuess()

// 获取轮播图数据
const getSwiperData = async () => {
  const result = await getSwiperDataAPI()
  // 存储轮播图数据
  swiperData.value = result.result
}

// 获取分类数据
const getCategoryData = async () => {
  const result = await getCategoryDataAPI()
  // 存储分类数据
  categoryData.value = result.result
}

// 获取热门推荐商品数据
const getHotGoodsData = async () => {
  const result = await getHotGoodsDataAPI()
  // 存储热门推荐商品数据
  hotGoodsData.value = result.result
}

// scroll-view 组件下拉刷新时触发的事件(下拉刷新)
// 对回调函数进行防抖处理 使用lodash插件提供的debounce方法
const onScrollRefresh = debounce(async () => {
  // 开启下拉刷新框
  refreshTrigger.value = true
  // 调用子组件的重置数据方法
  // guessRef.value?.resetData() 放入 Promise.all进行并发获取数据
  /* 重置当前组件中的数据
  三个获取数据的函数都为异步函数且返回值为Promise,可以使用Promise.all进行并发获取数据 */
  await Promise.all([
    getHotGoodsData(),
    getCategoryData(),
    getSwiperData(),
    guessRef.value?.resetData(),
  ])
  // 数据更新后 手动关闭下拉刷新框
  refreshTrigger.value = false
}, 500)

// 页面加载时的生命周期函数 组合式API需要将逻辑回调函数
onLoad(async () => {
  isLoading.value = true
  /* // 获取轮播图数据
  getSwiperData()
  // 获取分类数据
  getCategoryData()
  // 获取热门推荐商品数据
  getHotGoodsData() */
  // Promise.all进行并发获取数据
  await Promise.all([getSwiperData(), getHotGoodsData(), getCategoryData()])
  isLoading.value = false
})
// 分享
onShareAppMessage(() => {
  return {
    title: '我发现了一个超赞的商品，快来看看',
    path: '/pages/home/home',
    imageUrl: '../../static/images/logo_icon.png',
  }
})
// 分享到朋友圈
onShareTimeline(() => {
  return {
    title: '我发现了一个超赞的商品，快来看看',
    path: '/pages/home/home',
    imageUrl: '../../static/images/logo_icon.png',
  }
})
</script>

<template>
  <!-- 自定义导航栏 -->
  <CustomNavbar></CustomNavbar>
  <!-- 骨架屏组件 -->
  <PageSkeleton v-if="isLoading"></PageSkeleton>
  <!-- 使用scroll-view组件实现滚动效果 将自定义导航栏固定到页面顶部-->
  <scroll-view
    v-else
    refresher-enabled
    refresher-background="#00c19e"
    refresher-default-style="white"
    :refresher-triggered="refreshTrigger"
    @refresherrefresh="onScrollRefresh"
    @scrolltolower="onScrolltolower"
    class="scroll-view"
    scroll-y
  >
    <!-- 轮播图 -->
    <CustomSwiper :swiperData="swiperData"></CustomSwiper>
    <!-- 分类面板 -->
    <CategoryPanel :categoryData="categoryData"></CategoryPanel>
    <!-- 热门推荐 -->
    <HotPanel :hotGoodsData="hotGoodsData"></HotPanel>
    <!-- 猜你喜欢 -->
    <CustomGuess ref="guessRef"></CustomGuess>
  </scroll-view>
</template>

<style lang="scss">
/* #ifdef APP-PLUS */
#app,
/* #endif */
page {
  background-color: #f7f7f7;
  height: 100%;
  display: flex;
  flex-direction: column;
  .scroll-view {
    flex: 1; // 占满剩余高度
  }
}
</style>
